import useMount from "@/hooks/useMount";
import useUnmount from "@/hooks/useUnmount";
import { Button, message } from "antd";
import React, { useState } from "react";

function Child() {
  useMount(() => {
    message.success("首次渲染");
  });

  useUnmount(() => {
    message.success("组件已卸载");
  });

  return <h4>你好，我是小肚肚</h4>;
}

const UseMount: React.FC = () => {
  const [flag, setFlag] = useState<boolean>(false);

  return (
    <div style={{ padding: 50 }}>
      <h4>测试</h4>
      <Button type="primary" onClick={() => setFlag(v => !v)}>
        切换 {flag ? "unmount" : "mount"}
      </Button>
      <br />
      {flag && <Child />}
    </div>
  );
};
export default UseMount;
